@extends('student._layouts.app')
@section('css')
    <style>
        .works {
            position: absolute;
            top: 99px;
            width: 100%;
            height: auto;
            overflow: auto;
        }
        .work {
            width: 94%;
            height: 180px;
            margin: 20px auto 0 auto;
            padding: 8px 5px 5px 0;
            box-sizing: border-box;
            background-color: #fff;
            border: 1px solid #818181;
            border-radius: 2px;
            box-shadow: 0 1px 1px -1px rgba(0,0,0,.5);
        }
        .work-time {
            color: #AAA;
            font-size: 14px;
            margin: 0 0 0 12px;
            width: 100%;
            height: 20px;
            line-height: 20px;
        }
        .work-title {
            float: left;
            width: 30%;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
        }
        .work-content {
            margin: 10px 0 0 12px;
            height: 40px;
        }
        .work-action {
            width: 30%;
            height: 40px;
            float: right;
            line-height: 40px;
        }
        .action-look {
            width: 80px;
            height: 36px;
            font-size: 14px;
            background-color: #f2f2f2;
            color: #2d2d2d;
            border-radius: 5px;
            border: none;
        }
        .action-upload {
            width: 80px;
            height: 36px;
            font-size: 14px;
            background-color: #357ae8;
            color: #fff;
            border-radius: 5px;
            border: none;
        }
        .work-expire-time {
            width: 40%;
            height: 26px;
            margin: 15px 0 0 0;
            padding-left: 18px;
            line-height: 26px;
            color: #2d2d2d;
            font-size: 13px;
            background-color: #F2F2F2;
        }
        .work-remark {
            margin: 10px 0 0 12px;

        }
        .create-work {
            background-color: #fff
        ;
        }
    </style>
@endsection


@section('content')
    <section class="tabs">
        <a class="tab" href="/teacher/class/{{ $class_id }}/message">留言</a>
        <a class="tab active">作业</a>
        <a class="tab" href="/teacher/class/{{ $class_id }}/attendance">签到</a>
    </section>

    <section class="works">
        <button class="create-work" @click="createWork">发布作业</button>
        @foreach( $workList as $work)
            <div class="work">
                <div class="work-time">个人作业 17/12/26 09:00</div>
                <div class="work-content">
                    <div class="work-title">
                        {{ $work->title }}
                    </div>
                    <div class="work-action">
                        <button class="action-look" @click="check({{ $work->id }})">查看未交</button>
                    </div>
                </div>
                <div class="work-expire-time">
                    截至: {{ date('y/n/j H:i', $work->expired_at) }}
                </div>
                <div class="work-remark">
                    {{ $work->remark }}
                </div>
            </div>
        @endforeach

    </section>
@endsection
@section('js')
    <script src="{{ asset('js/vue.dev.js') }}"></script>
    <script src="{{ asset('js/axios.dev.js') }}"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                title: '爱尚课',
                phone: '',
                password: '',
            },
            methods: {
                check(work_id) {
                    let that = this
                    axios({
                        method: 'post',
                        url: '/teacher/class/{{ $class_id }}/work/' + work_id + '/check',
                        timeout: 2000,
                    })
                    .then(function (response) {
                        alert(response.data.message)
                        console.log(response)
                    })
                    .catch(function (response) {
                        console.log(response)
                    })

                },
                createWork() {
                    let that = this
                    let title = window.prompt("请输入作业标题")
                    let remark = window.prompt("请输入备注")
                    let time = window.prompt("请输入截止时间")

                    if (title || remark || time) {
                        axios({
                            method: 'post',
                            url: '/teacher/class/{{ $class_id }}/work/create',
                            timeout: 2000,
                            data: {
                                title: title,
                                remark: remark,
                                time: time
                            }
                        })
                        .then(function (response) {
                            alert(response.data.message)
                            window.location.reload()
                            console.log(response)
                        })
                        .catch(function (response) {
                            console.log(response)
                        })
                    }


                }
            }

        })

    </script>
@endsection
